<div class="un-filtro filtro-mapa">
    <form method="GET" id="frm-buscar-mapa">
        <div class="title"><h3>En mapa</h3></div>
        <input type="text" id="filtro-google_search"/>
        <div id="map_canvas" style="width: 213px; height: 300px;"></div>
        <div id="filtro-localidad" class="control control-localidad">
            <input id="filtro-latitude_hi" name="lat" type="hidden" value="{{lat}}"/>
            <input id="filtro-longitude_hi" name="lng" type="hidden" value="{{lng}}"/>
        </div>

        <label for="distancia-google">Distancia:</label>
        <input type="hidden" id="distancia-google" name="dist" value="{{dist}}"/>
        <div id="filtro-distancia-google">{{dist}} Km</div>
        <div id="filtro-slider"></div>
        <div class="actions" id="filtro-buscarGoogle">
                <a href="javascript:void(0);" onclick="$('#frm-buscar-mapa').submit();">Buscar</a>
        </div>
    </form>

    <script type="text/javascript">
        var mapaCargado = false;
        var MyGMap = {
            GMapScriptURL: "http://maps.google.com/maps?file=api&v=2&async=2&key=",
            Map: null,
            Geocoder: null,
            InitializeMaps: function () {
                if (GBrowserIsCompatible()) {
                    this.Map = new GMap2(document.getElementById("map_canvas"));
                    this.Map.addControl(new GSmallMapControl());
                    this.Geocoder = new GClientGeocoder();
                    this.setCenter({{lng}}, {{lat}})
                }
            },
            setCenter: function(longitude,lattitude){
                    this.Map.setCenter(new GLatLng(longitude, lattitude), 14);
                    var marker = new GMarker(new GLatLng(longitude, lattitude), {draggable: true});
                    this.Map.clearOverlays();
                    this.Map.addOverlay(marker);

                    GEvent.addListener(marker, 'dragend', function () {
                        var p = this.getLatLng();
                        $('#filtro-latitude_hi').val(p.lng());
                        $('#filtro-longitude_hi').val(p.lat());
                    });

            }
        }
        var CurrentKey = "{{ keyGoogleMaps }}";

        $(function() {

            $( "#filtro-slider" ).slider({
                value:{{dist}},
                min: 1,
                max: 100,
                step: 1,
                slide: function( event, ui ) {
                    $( "#distancia-google" ).val( ui.value );
                    $( "#filtro-distancia-google" ).html( ui.value + " Km" );
                }
            });
            $( "#distancia-google" ).val($( "#filtro-slider" ).slider( "value" ) );
            $( "#filtro-distancia-google" ).html($( "#filtro-slider" ).slider( "value" ) + " Km" );

            $.getScript(MyGMap.GMapScriptURL + CurrentKey + "&callback=MyGMap.InitializeMaps");

            $( "#filtro-google_search" ).autocomplete({
                source: "{{ path('googleUbicacion') }}",
                minLength: 2,
                delay: 900,
                select: function( event, ui ) {
                    $('#filtro-latitude_hi').val(ui.item.lattitude);
                    $('#filtro-longitude_hi').val(ui.item.longitude);
                    MyGMap.setCenter(ui.item.longitude, ui.item.lattitude);
                }
            });
        });

        $('#frm-buscar-mapa').submit(function() {
            url = Routing.generate('enmapa', {
                "lat": $('#filtro-latitude_hi').val(), 
                "lng": $('#filtro-longitude_hi').val(),
                "dist": $('#distancia-google').val() 
            });
            window.location = url;
            return false;
        });
        </script>

</div>